<script setup lang="ts">
import { onMounted, ref } from 'vue';
import type { Ref } from 'vue';

const value: Ref<string> = ref('')
const tel = localStorage.getItem('mobilephone')
//加载这个页面就发送验证码
const time: Ref<number> = ref(60)
const codetext: Ref<string> = ref('60秒后重新获取')
let isSend = false//记录有没有正在发送验证码
onMounted(() => {
    sendcode()
})
function sendcode() {
    const timer = setInterval(() => {
        isSend = false
        time.value--
        codetext.value = time.value + 's后重新获取'
        if (time.value == 0) {
            time.value = 60
            codetext.value = '重新获取验证码'
            clearInterval(timer)
        }
    }, 1000)
}
</script>
<template>
    <div class="content">
        <div class="header">
            <van-nav-bar left-text="返回" left-arrow />
        </div>
        <div class="nr">
            <p class="login-appname">输入验证码</p>
            <span class="start">验证码已发送至
                <br>
                {{ tel ? tel : '游客账户' }}</span>

            <p class="warning">{{ codetext }}</p>
            <!-- 密码输入框 -->
            <van-password-input :value="value" :mask="false" length="4" gutter="4px" />
            <!-- 数字键盘 -->
            <van-number-keyboard v-model="value" :show="true" />


        </div>

    </div>
</template>
<style lang="scss" scoped>
.content {
    background-color: #F6F6F6;
    height: 100%;
}

.nr {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 14vw;

    .login-appname {
        font-size: 0.2rem;
    }

    .start {
        margin-top: 2vw;
        margin-bottom: 14vw;
        text-align: center;
    }

    .warning {
        font-size: 0.12rem;
        color: #C1C4C8;
    }


}

.van-password-input {
    width: 80vw;
    display: flex;
    justify-content: space-evenly;
}

.van-password-input .van-password-input__item {
    background-color: red;
    width: 14vw;
    height: 14vw;

}
</style>